<template>

  <div class='container'>
    <el-card>
      <div class="top">
        <div class="size">
          <el-link :underline='false' href="http://localhost:8080/subjects/list#/subjects/list">学科管理</el-link>
          <el-link :underline='false' href="http://localhost:8080/subjects/list#/dashboard"><i class="el-icon-arrow-right"> 大数据</i></el-link>
          <el-link :underline='false' href="#"><i class="el-icon-arrow-right"> 目录管理</i></el-link>
        </div>
        <hr>
        <!--目录名称  -->
        <el-form :inline="true" ref="requestParameters" :model="requestParameters" class="demo-form-inline">
          <el-form-item label="目录名称" prop='directoryName'>
            <el-input clearable v-model="requestParameters.directoryName" placeholder="请输入目录名称" @keyup.enter="handleFilter" style="height:32px;"></el-input>
          </el-form-item>
          <el-form-item label="状态:" prop="state" class="form-items">
            <el-select class="filter-item" style="width: 200px;" v-model="requestParameters.state" @keyup.enter="handleFilter">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearsub" size='small'>清除</el-button>
            <el-button type="primary" @click="handleFilter" size='small'>搜索</el-button>
          </el-form-item>
          <el-form-item class="right-box">
            <el-link type="primary" class="el-icon-back" :underline='false' @click="$router.push('/subjects/list')">返回学科</el-link>
            <el-button class="el-icon-edit" type="success" @click="handleChange" size='small'>新增目录</el-button>
          </el-form-item>
          <!-- 数据总条数-->
          <el-alert :title='alertText' type="info" :closable='false' show-icon>
          </el-alert>
        </el-form>

        <!-- 员工列表 -->
        <el-card style="margin-top: 10px;">
          <el-table :data="list" v-loading='loading'>
            <el-table-column label="序号" type="index" width="70" />
            <el-table-column label="所属学科" prop="subjectName" />
            <el-table-column label="目录名称" prop="directoryName" width="120" />
            <!-- formatter的作用专门用于格式化列的数据 -->
            <el-table-column label="创建者" prop="username" />
            <el-table-column align="center" label="创建日期" width="200">
              <template v-slot="{row}">
                {{diyTime(row.addDate)}}
              </template>
            </el-table-column>
            <el-table-column label="面试题数量" prop="totals">
            </el-table-column>

            <el-table-column align="center" label="状态">
              <template slot-scope="scope">
                <span>{{scope.row.state===1? '已启用':'已禁用'}}</span>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column align="center" label="操作" width="280" class-name="small-padding fixed-width">
              <template slot-scope="scope" class="boxsize">
                <el-button type="text" size="small" @click="handleStatus(scope.row)">
                  <span v-if="scope.row.state==1" style="font-size:14px;">启用</span>
                  <span v-else style="font-size:14px;">禁用</span>
                </el-button>
                <el-button type="text" size="small" v-if="scope.row.state !='deleted'" :disabled='scope.row.state==1' @click="hanldeEditForm(scope.row.id)" style="font-size:14px;">修改</el-button>
                <el-button v-if="scope.row.status!='deleted'" size="small" type="text" :disabled='scope.row.state==1' @click="removeUser(scope.row)" style="font-size:14px;">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <div class="pagination">
            <div class="pages">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Number(requestParameters.page)" :total="Number(total)" :page-size.sync="requestParameters.pagesize" :page-sizes="[5,10,15,20]" layout=" prev, pager, next,sizes, jumper"></el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
    <!-- 增加/编辑弹窗 -->
    <el-dialog :title="title" size='medium' :visible="showDialog" top="8vh" :before-close="handleClose" width='390px'>
      <el-form ref="addForm" label-width="10rem" :model="formData" :rules="rules">
        <!-- 所属学科的宽度 加 label-width="5.375rem" -->
        <el-form-item label="所属学科:" prop="subjectID" label-width="5.375rem">
          <div class="optipn-el">
            <el-select v-model="formData.subjectID" placeholder="请选择" style="width: 16.3rem;" size='medium'>
              <el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.subjectID"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item class="catalogue" label="目录名称:" prop="directoryName" label-width="5.375rem">
          <el-input v-model="formData.directoryName" size='medium' style="width: 16.3rem;" placeholder="请输入目录名称" class="cataloage" />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 获取列表数据 增加所属学科
import { list, add, remove, changeState, detail, update } from '../../api/hmmm/directorys'

import { status } from '../../api/hmmm/constants'
import { parseTime } from '../../utils/index'

export default {
  data () {
    return {
      // 弹窗
      loading: true,
      // 查询参数 页码
      requestParameters: {
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        pages: 10
      },
      total: null,
      // 控制添加员工弹窗标志位
      showDialog: false,
      // 列表总数
      counts: null,
      // 员工列表
      list: [],
      alertText: '',
      titleInfo: {
        pageTitle: '用户', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        directoryName: '',
        // 所属学科
        // subjectName: '',
        subjectID: ''
      }, // 表单验证
      rules: {
        // 用户名 验证
        directoryName: [
          { required: true, message: '用户姓名不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 8, message: '用户姓名为1-8位', trigger: ['blur', 'change'] }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  computed: {
    status () {
      return status
    },
    title () {
      return this.formData.id ? '修改目录' : '新增目录'
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 格式化时间
    diyTime (addtime) {
      return parseTime(addtime)
    },
    // 清除输入框中的内容
    clearsub () {
      this.requestParameters.directoryName = ''
      this.requestParameters.state = ''
    },
    // ------------------------------------- 新增用户、编辑用户
    handleChange () {
      this.showDialog = true
      this.formData = this.$options.data().formData
      // 只清除表单项name的校验，不清楚表单项name的数值
      this.$refs.addForm.resetFields()
      // this.$refs.formData.clearValidate('directoryName')
    },
    // --------------------------------------修改
    // 表单详情数据加载
    async hanldeEditForm (objeditId) {
      this.showDialog = true
      this.formData.id = objeditId
      const data = { ...this.formData }

      const { data: res } = await detail(data)
      // 获取详情 给formData
      this.formData = res
    },
    // -------------------------------------- 启用、禁用
    async handleStatus (val) {
      try {
        await changeState({
          id: val.id,
          state: val.state === 1 ? 0 : 1
        })
        this.getList()
        this.$message.success('成功')
      } catch (err) {
        this.$message.error('成功')
      }
    },
    // 初始数据
    initialDate () {
      // 读取数据
      this.getList()
    },
    // --------------------------------------获取列表数据
    async getList (params) {
      this.loading = true
      try {
        const { data: res } = await list(this.requestParameters)
        // 获取数据给dataList
        this.list = res.items
        // 获取总条数
        this.total = res.counts
        this.alertText = `共 ${this.total} 条记录`
        res.items.forEach(item => {
          this.formData.subjectID = item.subjectID
          this.formData.directoryName = item.directoryName
        })
      } catch {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    // 搜索信息
    handleFilter () {
      // 当前页数所有信息
      this.requestParameters.page = 1
      // 获取列表传参数
      this.getList(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // ----------------------------------------删除
    removeUser (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const ret = await remove(id)
        if (ret.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        }
      }).catch(() => {
        this.$message.error('取消删除')
      })
    },
    // ---------------------------------------添加 - 修改目录
    handleSubmit () {
      this.$refs.addForm.validate(async valid => {
        // 如果有一个不通过直接停止添加
        if (!valid) return
        if (this.formData.id) {
          const ret = await update(this.formData)
          if (ret.status === 200) {
            this.$message.success('修改成功')
            this.getList()
            this.$refs.addForm.resetFields()
            this.showDialog = false
          }
        } else {
          try {
            const ret = await add(this.formData)
            if (ret.status === 200) {
              // // 提示添加成功
              this.$message.success('添加员工成功')
              this.$refs.addForm.resetFields()
              this.showDialog = false
              this.getList()
            }
          } catch (err) {
            // 错误信息
            console.log(err, '=====')
            this.$message.error('添加员工失败')
          }
        }
      })
    },
    // 关闭弹窗
    handleClose () {
      this.showDialog = false
      this.$refs.addForm.resetFields()
    }
  }
}
</script>

<style scoped lang='scss'>
.top {
  .right-box {
    float: right;
  }
  .el-icon-edit {
    margin-left: 20px;
  }
  .form-items {
    margin-left: 30px;
  }
  .el-icon-back {
    font-size: 13px;
  }
  .catalogue {
    margin-right: 100px;
  }
}
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tips {
    line-height: 24px;
    padding: 0px 24px;
    border-radius: 5px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
}
.button-el {
  float: right;
}
.cataloage {
  float: left;
  left: 0px;
  width: 400px;
}
.pagination {
  margin-left: 540px;
  margin-top: 20px;
}
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
>>>>>>> 804c80c6a2c0f1b670438d96df151c82197c5839
